import { Component } from 'react';
import { Button } from 'react-vant';
import { LikeO } from '@react-vant/icons';
import { Cell } from 'react-vant';
import { Popup } from 'react-vant';
import { Toast } from 'react-vant';
import { Swiper } from 'react-vant';
import { Tabbar } from 'react-vant'
import { FriendsO, HomeO, Search, SettingO } from '@react-vant/icons'
class App extends Component {
    state={
        isShow:false
    }
    render() {
        return (
            <div>
                <h1>react-vant</h1>
                <div>      <Button type='primary'>Primary</Button>
                    <Button type='info'>Info</Button>
                    <Button type='default'>Default</Button>
                    <Button type='warning'>Warning</Button>
                    <Button type='danger' onClick={()=>{
                        Toast({
                            type:"loading",
                            message:"加载中...",
                            duration:0
                        })
                        setTimeout(()=>{
                            Toast.clear();
                        },2000)
                    }}>提示</Button></div>
                <div>
                    <Button type='danger' size='mini' color='linear-gradient(to right, blue, #ee0a24)' icon={<LikeO />} onClick={()=>{
                        this.setState({
                            isShow:true
                        })
                    }}>哈哈哈</Button>
                </div>
                <div>
                    <Cell title='单元格' isLink />
                    <Cell.Group card title='哈哈哈' border={true} inset={true}>
                        <Cell title='单元格' value='内容' label='嘿嘿嘿' />
                        <Cell title='单元格' value='内容' />
                    </Cell.Group>
                </div>
                <Popup visible={this.state.isShow} position='top' closeOnClickOverlay={true} onClose={()=>{
                    console.log("要关闭啦")
                    this.setState({
                        isShow:false
                    })
                }}>
                    <div style={{ padding: '30px 50px' }}>内容</div>
                </Popup>
                <Swiper>
                    <Swiper.Item>
                        <img src="https://img.yzcdn.cn/vant/apple-2.jpg" alt="" style={{
                            width:'200px'
                        }}/>
                    </Swiper.Item>
                    <Swiper.Item>
                        <img src="https://img.yzcdn.cn/vant/apple-2.jpg" alt="" style={{
                            width:'200px'
                        }}/>
                    </Swiper.Item>
                    <Swiper.Item>
                        <img src="https://img.yzcdn.cn/vant/apple-2.jpg" alt="" style={{
                            width:'200px'
                        }}/>
                    </Swiper.Item>
                </Swiper>
                <div>
                <Tabbar>
        <Tabbar.Item icon={<HomeO />}>标签</Tabbar.Item>
        <Tabbar.Item icon={<Search />}>标签</Tabbar.Item>
        <Tabbar.Item icon={<FriendsO />}>标签</Tabbar.Item>
        <Tabbar.Item icon={<SettingO />}>标签</Tabbar.Item>
      </Tabbar>
                </div>
            </div>
        )
    }
}
export default App;